<html>    
    <head>
        <title>Festering Woods</title>
        <style>
            #chart_div { 
                background: url('images/19953.png') no-repeat;    
                padding: 15px;
                width: 616px !important;
                height: 786px !important;
            }
    </style>
    </head>
    <body>
        <div id="chart_div" style="width: 700px; height: 500px;"></div>
    </body>
    <script src="https://www.google.com/jsapi?x.js"></script>
    <script src="../../../LocationTrackerData/locations.19953.js"></script>

    <script>

        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);

		if(typeof data19953 == "undefined"){
			alert("Data file not found:\n\n /LocationTrackerData/locations.19953.js");
		}
		
        function drawChart() {

            var datatable = new google.visualization.DataTable();

            datatable.addColumn('number', 'X');
            datatable.addColumn('number', 'Elite');
            datatable.addColumn({ type: 'string', role: 'tooltip' });
            datatable.addColumn('number', 'Unique');
            datatable.addColumn({ type: 'string', role: 'tooltip' });
            datatable.addColumn('number', 'Rare');
            datatable.addColumn({ type: 'string', role: 'tooltip' });
            datatable.addColumn('number', 'Goblin');
            datatable.addColumn({ type: 'string', role: 'tooltip' });
            datatable.addColumn('number', 'Objective');
            datatable.addColumn({ type: 'string', role: 'tooltip' });
            datatable.addColumn('number', 'Cursed Event');
            datatable.addColumn({ type: 'string', role: 'tooltip' });
            datatable.addColumn('number', 'Portal');
            datatable.addColumn({ type: 'string', role: 'tooltip' });

            datatable.addRows(data19953);

            var options = {
                width: 616,
                height: 786,
                title: 'Festering Woods (19953)',
                titlePosition: 'in',
                titleTextStyle: { color: 'white', fontSize: 14 },
                hAxis: {
                    title: '',
                    minValue: 450,
                    maxValue: 1065,
                    viewWindowMode: "maximized",
                    textStyle: { color: 'white' },
                    gridlines: { color: '#333', count: 4 },
                    direction: 1
                },
                vAxis: {
                    title: '',
                    minValue: 130,
                    maxValue: 905,
                    viewWindowMode: "maximized",
                    gridlines: { color: '#333', count: 4 },
                    direction: -1
                },
                legend: {
                    position: 'in',
                    maxLines: 2,
                    textStyle: { color: 'white', fontSize: 13 }
                },
                backgroundColor: 'transparent',
                chartArea: {
                    left: 0,
                    top: 0,
                    width: 586,
                    height: 746
                },
            };

            /*
            var series = {
                0: {
                    hidden: false,
                    visibleInLegend: true,
                    color: 'royalblue'
                },
                1: {
                    hidden: false,
                    visibleInLegend: true,
                    color: 'red'
                },
                2: {
                    hidden: false,
                    visibleInLegend: false,
                    color: 'green'
                },
                3: {
                    hidden: false,
                    visibleInLegend: true,      
                    color: 'grey',
                },
                4: {
                    hidden: false,
                    visibleInLegend: false,
                    color: 'yellow'
                },
                5: {
                    hidden: false,
                    visibleInLegend: true,      
                    color: 'darkorange',
                },
                6: {
                    hidden: false,
                    visibleInLegend: true,      
                    color: 'darkblue',
                },   
            };      
            options.series = series;
            */

            var d = document.getElementById('chart_div');
            var view = new google.visualization.DataView(datatable);
            chart = new google.visualization.ScatterChart(d);
            chart.draw(view, options);

            // Store an array of the original column indexes so we can reset
            var originalcolumns = [];
            for (var i = 0; i < datatable.getNumberOfColumns() ; i++) {
                originalcolumns.push(i);
            }

            var drilled = false;

            google.visualization.events.addListener(chart, 'select', function () {

                // if row is undefined, we clicked on the legend
                if (!chart.getSelection()[0]['row']) {

                    if (drilled) {
                        // reset
                        view.setColumns(originalcolumns);
                        chart.draw(view, options);
                        drilled = false;
                        return;
                    }

                    var selectedindex = chart.getSelection()[0]['column'];
                    var totalcolumns = datatable.getNumberOfColumns();
                    var newcolumns = [];

                    // put the columns we want to keep in the new columns array
                    for (var i = 0; i < totalcolumns; i++) {

                        isPreviousSelected = (i - 1 > 0 && i - 1 == selectedindex);
                        isTooltip = (datatable.getColumnRole(i) == "tooltip");

                        if (i == 0 || i == selectedindex || isTooltip && isPreviousSelected) {
                            newcolumns.push(i);
                        }
                    }

                    view.setColumns(newcolumns);
                    chart.draw(view, options);
                    drilled = true;

                }
            });


        }




    </script>
</html>